<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="60%"
    @close="onCancel"
  >
    <el-row>
      <el-col :span="6">
        <span>【题型】：{{ +questionInfo.questionType | questionType }}</span>
      </el-col>
      <el-col :span="6">
        <span>【编号】：{{ questionInfo.id }}</span>
      </el-col>
      <el-col :span="6">
        <span>【难度】：{{ +questionInfo.difficulty | difficulty }}</span>
      </el-col>
      <el-col :span="6">
        <span>【标签】：{{ questionInfo.tags }}</span>
      </el-col>
    </el-row>
    <el-row style="margin: 20px 0">
      <el-col :span="6">
        <span>【学科】：{{ questionInfo.subjectName }}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】：{{ questionInfo.directoryName }}</span>
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{ questionInfo.direction }}</span>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <p>【题干】：</p>
      <p style="color: blue" v-html="questionInfo.question"></p>
      <!-- 单选 -->
      <div v-if="questionInfo.questionType === '1'">
        <p>单选题 选项：（以下选中的选项为正确答案）</p>
        <el-radio-group v-model="isRight">
          <div
            style="margin-bottom: 15px"
            v-for="item in questionInfo.options"
            :key="item.id"
          >
            <el-radio :label="item.isRight" style="pointer-events: none"
              >{{ item.code }}: {{ item.title }}</el-radio
            >
          </div>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <div v-else-if="questionInfo.questionType === '2'">
        <p>多选题 选项：（以下选中的选项为正确答案）</p>
        <el-checkbox-group v-model="checkboxIsRight">
          <div
            style="margin-bottom: 15px"
            v-for="item in questionInfo.options"
            :key="item.id"
          >
            <el-checkbox :label="item.isRight" style="pointer-events: none">{{
              item.title
            }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <!-- 简答 -->
      <div v-else></div>
    </el-row>
    <hr />
    <el-row>
      <p>
        <span>【参考答案】: </span>
        <el-button
          size="small"
          type="danger"
          @click="questionInfo.videoURL ? (isShowVideo = true) : false"
          >视频答案预览</el-button
        >
      </p>
      <el-row v-if="isShowVideo" style="margin-top: 10px">
        <!-- questionInfo.videoURL 打不开，所以使用的固定地址 -->
        <video
          style="width: 400px; height: 300px"
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
          autoplay
          controls
        ></video>
      </el-row>
    </el-row>
    <hr />
    <el-row type="flex">
      <p>【答案解析】：</p>
      <p style="margin: 0" v-html="questionInfo.answer"></p>
    </el-row>
    <hr />
    <el-row>
      <span>【题目备注】：{{ questionInfo.remarks }}</span>
    </el-row>
    <el-row style="margin-top: 30px" type="flex" justify="end">
      <el-button type="primary" @click="onCancel">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// 获取基础题库的详情
import { detail } from '@/api/hmmm/questions'
// 枚举列表
import { questionType, difficulty } from '@/api/hmmm/constants'

export default {
  name: 'PreviewQuestions',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    questionType(value) {
      const obj = questionType.find((item) => item.value === value)
      return obj ? obj.label : '未知'
    },
    difficulty(value) {
      const obj = difficulty.find((item) => item.value === value)
      return obj ? obj.label : '未知'
    }
  },
  data() {
    return {
      // 题目信息
      questionInfo: {},
      // 多选框
      checkList: ['复选框 A'],
      isRight: 1, // 单选正确
      checkboxIsRight: [1], // 多选正确
      isShowVideo: false // 是否显示视频
    }
  },
  created() {},
  watch: {},
  methods: {
    async getQuestionInfo(id) {
      const { data } = await detail({ id })
      console.log(data)
      this.questionInfo = data
    },
    onCancel() {
      this.questionInfo = {}
      this.isShowVideo = false
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style></style>
